像隻無頭蒼蠅一樣的學習ㄧ定會徒勞，但有時我們成了無頭蒼蠅卻不自知，唉。

在上一篇我們討論到在實作之前，先把需要的功能和邏輯一一列出來，包含可能會用到的 v-指令，這樣真的可以幫我們更快速且精準地進行實作。

• 把已經輸入的列表結構列出來(v-for)
• 獲取使用者的輸入值(v-model)
• enter 時新增資料(v-on,.enter)
• 清空輸入框(v-on)
• [刪除]點擊刪除指定的 item 時會 Item 刪掉(v-on splice index)
• [統計]會顯示輸入的 Item 有幾個({{綁定陣列的長度}})
• [清空]點清空按鈕時會全部清空(v-on)
• [隱藏]在沒有內容的時候把 Item 數量和環不清除的區塊隱藏(v-show)

我們可以先看看範例（並沒有特別去把畫面弄得美美的，純粹以功能來做，所以抱歉畫面就很陽春囉～）
Vue_Base_todoListSimple

HTML 的部分

• 在輸入框裡指定為輸入文字格式type="text" ，雙向綁定為輸入值inputValue，再監聽輸入時按下 enter 鍵時觸發「增加」內容的方法inputValue。
• 以v-for的方式把在todos裡陣列的內容讀取出來，並利用陣列的 index 值+1，以便顯示從 1 開始，並在後面加上一個刪除的按鈕，並綁定監聽事件的removeTodo(index)方法，帶入 index 來抓取陣列的唯一值，遮樣才能知道要刪除的是哪一筆。
• 以陣列長度來顯示總共有幾筆資料，必且此區域以v-if判斷，如果陣列長度不等於 0 才顯示，不然隱藏此區塊。

<div id="app">
  <input type="text" placeholder="enter your todo" @keyup.enter="addTodo()" v-model="inputValue"/>
  <hr/>
  <div>
    <p v-for="(item,index) in todos">{{index+1}}.{{item}}
      <button @click="removeTodo(index)">X</button>
    </p>
  </div>
  <hr/>
  <div v-if="todos.length !=0">
    Total : {{todos.length}} todo
    <button @click="clearAll">Clear All</button>
  </div>
</div>

接下來就來處理 Vue 實例裡的 data 資料初始與方法：
JavaScript 的部分

const vm = new Vue({
  el: '#app',
  data: {
    todos: ['學習', '睡覺', '做飯'], // 陣列資料裡的預設值，為了觀察先放入幾個元素為進入畫面的顯示，當然，也可以設空陣列，
    inputValue: '', // 輸入框先初始空字串
  },
  methods: {
    addTodo: function () {
      // 增加 todo 的方法
      this.todos.push(this.inputValue); // 使用陣列方法push()把輸入值放到陣列裡
      console.log(this.todos);
      this.inputValue = ''; // 1把輸入框清空
    },
    removeTodo: function (index) {
      // 刪除 todo
      this.todos.splice(index, 1); // 使用陣列方法splice(指定的index開始，刪除一筆)，依照抓到的 index 刪除
    },
    clearAll: function () {
      // 清除所有
      this.todos = []; // 把儲存陣列的 todos 用空陣列賦值清空
    },
  },
});

使用 Vue 來實作 TodoList 是不是沒想像的難？我們也可以試著增加一些功能，例如修改、畫線或排序，會發現用 Vue 來做這些功能也不會特別困難喔！

每日一句法文有益身心：Tu me plais ! --> 舉.麼.僕勒！ --> 我喜歡你(妳)！ --> 超級好用，學起來 !